<template>
  <div id="deal-lobby">
    <div class="fixed-tabbar">
      <div class="dealtab">
        <div class="select-down" @click="downfirst">
          {{dealloan}}
          <x-icon type="ios-arrow-up" size="20" v-show="show01"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show01"></x-icon>
        </div>
        <div class="select-down" @click="downsecond">
          {{loantime}}
          <x-icon type="ios-arrow-up" size="20" v-show="show02"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show02"></x-icon>
        </div>
        <div class="select-down" @click="downthird">
          {{changetimes}}
          <x-icon type="ios-arrow-up" size="20" v-show="show03"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show03"></x-icon>
        </div>
        <div class="select-down" @click="downfour">
          {{publishtime}}
          <x-icon type="ios-arrow-up" size="20" v-show="show04"></x-icon>
          <x-icon type="ios-arrow-down" size="20" v-show="!show04"></x-icon>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div v-transfer-dom class="flea_popup_client">
      <popup v-model="show01" position="top" max-height="50%">
        <div v-for="(i, index) in chooselist01" :key="index">
          <p @click="chooseitem(i, index)">{{i}}</p>
        </div>
      </popup>
    </div>
    <div v-transfer-dom class="flea_popup_client">
      <popup v-model="show02" position="top" max-height="50%">
        <div v-for="(i, index) in chooselist02" :key="index">
          <p @click="chooseitem(i, index)">{{i}}</p>
        </div>
      </popup>
    </div>
    <div v-transfer-dom class="flea_popup_client">
      <popup v-model="show03" position="top" max-height="50%">
        <div v-for="(i, index) in chooselist03" :key="index">
          <p @click="chooseitem(i, index)">{{i}}</p>
        </div>
      </popup>
    </div>
    <div v-transfer-dom class="flea_popup_client">
      <popup v-model="show04" position="top" max-height="50%">
        <div  v-for="(i, index) in chooselist04" :key="index">
            <p @click="chooseitem(i, index)">{{i}}</p>
        </div>
      </popup>
    </div>
    <scroller  lock-x scrollbar-y use-pullup @on-pullup-loading="loadMore" v-model="status" ref="scroller">
      <div class="box2 scroller-top">
        <product-detail v-for="(item, index) in productlist" :list="productlist" :i="item" :key="index" :keyindex="index"></product-detail>
      </div>
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
    </scroller>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import ProductDetail from '../comment/ProductDetail'
import { Scroller, Spinner, TransferDom, Popup } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      productlist: [],
      showlist: [],
      show01: false,
      show02: false,
      show03: false,
      show04: false,
      backshow: false,
      demo1: 1,
      demo2: 1,
      demo3: 1,
      demo4: 1,
      dealloan: '借款需求',
      loantime: '借款期限',
      changetimes: '易手次数',
      publishtime: '发布时间',
      dealvalue: '',
      loanvalue: '',
      changevalue: '',
      timevalue: '',
      tokenval: '',
      chooselist01: ['全部', '5000以下', '5000-1万', '1万-3万', '3万以上'],
      chooselist02: ['全部', '3个月以下', '3-6个月', '6-12个月', '1年以上'],
      chooselist03: ['全部', '没有易手', '易手1次', '易手2次', '易手3次', '易手4次', '易手5次以上'],
      chooselist04: ['全部', '今天', '3天内', '7天内', '30天内', '30天以上'],
      PageNum: 100, // 记录每页数
      count: 1,
      amountIndex: 0, // 借款需求数
      termIndex: 0, // 借款期限数
      transferCountIndex: -1, // 易手次数数
      pushTimeIndex: 0, // 发布时间数
      pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Popup,
    ProductDetail,
    Scroller,
    Spinner
  },
  created () {
    this.tokenval = utils.AnonToken(timeStamp)
    this.loadmore(this.PageNum, this.amountIndex, this.termIndex, this.transferCountIndex, this.pushTimeIndex)
  },
  methods: {
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum, this.amountIndex, this.termIndex, this.transferCountIndex, this.pushTimeIndex)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (index, amountIndex, termIndex, transferCountIndex, pushTimeIndex) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
      var params = {
        Tokenuser: this.tokenval,
        timestamp: timeStamp,
        userid: this.$store.state.userID,
        amount: amountIndex,
        term: termIndex,
        transferCount: transferCountIndex,
        pushTime: pushTimeIndex,
        pagenum: 1,
        perpagenum: index
      }
      api.deal(params).then(res => {
        if (res.status === '200') {
          this.productlist = res.data.list
        }
      })
    },
    downfirst () {
      this.show01 = !this.show01
      this.show02 = false
      this.show03 = false
      this.show04 = false
    },
    downsecond () {
      this.show02 = !this.show02
      this.show01 = false
      this.show03 = false
      this.show04 = false
    },
    downthird () {
      this.show03 = !this.show03
      this.show02 = false
      this.show01 = false
      this.show04 = false
    },
    downfour () {
      this.show04 = !this.show04
      this.show02 = false
      this.show03 = false
      this.show01 = false
    },
    chooseitem (val, index) {
      // 借款需求
      if (this.show01 === true) {
        this.amountIndex = index
        this.dealloan = val
      }
      // 借款期限
      if (this.show02 === true) {
        this.termIndex = index
        this.loantime = val
      }
      // 易手次数
      if (this.show03 === true) {
        this.transferCountIndex = index - 1
        if (index === 6) {
          this.changetimes = val.slice(2)
        } else {
          this.changetimes = val
        }
      }
      // 发布时间
      if (this.show04 === true) {
        this.pushTimeIndex = index
        this.publishtime = val
      }
      if (this.productlist.length === 0) {
        this.productlist = []
      }
      this.loadmore(this.PageNum, this.amountIndex, this.termIndex, this.transferCountIndex, this.pushTimeIndex)
      this.backshow = false
      this.show01 = false
      this.show02 = false
      this.show03 = false
      this.show04 = false
    }
  }
}
</script>
